<template>
  <view class="content">
    <!-- 主菜分类 -->
    <view class="food_cate">
      <view class="food_cate_title">主菜</view>
      <view class="food_item" v-for="item in mainDishes" :key="item._id" @click="go_cate(item)">
        <image :src="item.img_url"></image>
        <text>{{item.name}}</text>
      </view>
    </view>

    <!-- 核心调料分类 -->
    <view class="food_cate">
      <view class="food_cate_title">核心调料</view>
      <view class="food_item" v-for="item in coreSeasoning" :key="item._id" @click="go_cate(item)">
        <image :src="item.img_url"></image>
        <text>{{item.name}}</text>
      </view>
    </view>

    <!-- 脆皮水分类 -->
    <view class="food_cate">
      <view class="food_cate_title">脆皮水及腌料</view>
      <view class="food_item" v-for="item in crispyWater" :key="item._id" @click="go_cate(item)">
        <image :src="item.img_url"></image>
        <text>{{item.name}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        food_list: [],
        mainDishes: [],
        coreSeasoning: [],
        crispyWater: []
      }
    },
    onLoad() {
      this.get_food_list();
    },
    methods: {
      async get_food_list() {
        uniCloud.callFunction({
          name: "get_food_list",
          data: {}
        }).then(res => {
          this.food_list = res.result.data;
          // 根据 category 分类
          this.mainDishes = this.food_list.filter(item => item.category === '主菜');
          this.coreSeasoning = this.food_list.filter(item => item.category === '核心调料');
          this.crispyWater = this.food_list.filter(item => item.category === '脆皮水及腌料');
        })
      },
      go_cate(item) {
        // 跳转到详情页面并传递_id参数
        uni.navigateTo({
          url: `/pages/detail/detail?id=${item._id}`
        });
      }
    }
  }
</script>

<style lang="scss">
  .food_cate {
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #efefef;

    .food_cate_title {
      display: block;
      /* 或者使用 display: flex; flex-direction: column; */
      font-weight: bold;
      width: 100%;
      padding: 10rpx 20rpx 20rpx;
      font-size: 40rpx;
    }

    .food_item {
      display: flex;
      flex-direction: column;
      font-size: 25rpx;
      width: 140rpx;
      height: 160rpx;
      padding: 8rpx 15rpx;
      margin: 5rpx;
      justify-content: center;
      align-items: center;
      text-align: center;

      image {
        width: 120rpx; // 原150rpx → 120rpx（缩小20%）
        height: 120rpx; // 原150rpx → 120rpx（缩小20%）
        margin-bottom: 8rpx; // 增加图片与文字的间距控制
      }

      text {
        font-size: 20rpx; // 原25rpx → 20rpx（字号缩小20%）
        line-height: 1.4; // 增加行高提升可读性
        padding: 0 5rpx; // 增加左右内边距防止文字溢出
      }

    }
  }
</style>